import { useEffect } from "react";
import { useCounter } from "./store";

const Counter = () => {
  const count = useCounter((state) => state.count);

  useEffect(() => {
    console.log("update");
  });

  return <div>count: {count}</div>;
};

const Name = () => {
  const name = useCounter((state) => state.name);
  return <div>name: {name}</div>;
};

export const ZustandDemo = () => {
  const add = useCounter((state) => state.add);
  const sub = useCounter((state) => state.sub);
  const double = useCounter((state) => state.double);
  const changeName = useCounter((state) => state.changeName);

  return (
    <div>
      {/* <div>{count}</div> */}
      <Counter />
      <Name />

      <div>
        <button onClick={add}>+</button>
        <button onClick={sub}>-</button>
        <button onClick={double}>*2</button>

        {/* <div>{name}</div> */}
        <button onClick={changeName}>改变名字</button>
      </div>
    </div>
  );
};
